<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../static/css/style1.css" rel="stylesheet" type="text/css" />
    <script src="../static/js/jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/jquery.superslide.2.1.1.js" type="text/javascript"></script>
    <script src="../static/js/actions.js" type="text/javascript"></script>
{#    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>#}
{#    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>#}
{#    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>#}
{#    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>#}
{#    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>#}

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="icon" href="../static/images/logo.ico" type="image/x-icon"/>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
    <script src="{{ url_for('static',filename='jquery/jquery-3.5.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='earchts/echarts.min.js') }}"></script>
    <script>
        $(function () {//jquery启动函数
            bar()
            pie()
            line()
            sex()

        })


        function pie() {
            $.ajax({
                url:"getUnivTagsDataForPie",
                method:"get",
                success:function (result){
                    var jsonObj=JSON.parse(result);
                    var pie = echarts.init(document.getElementById('pie'))
                    option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '统计科目数量',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: true,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: true
                                },
                                data: jsonObj
                            }
                        ]
                    };
                    pie.setOption(option);
                },
                error:function (e){
                    layer.msg("请求服务器失败");
                }
            });

        }


        function bar() {
            $.ajax({
                url: "/getUserDataForBar",
                method: "get",
                success: function (result) {
                    jsonObj = JSON.parse(result)
                    var list1 = jsonObj["enable"]
                    var list2 = jsonObj["count"]
                    var bar = echarts.init(document.getElementById('bar'))
                    // 指定图表的配置项和数据
                    var option = {

                        tooltip: {},
                        legend: {
                            data: ['名称']
                        },
                        xAxis: {
                            data: list1
                        },
                        yAxis: {},
                        series: [{
                            name: '名次',
                            type: 'bar',
                            data: list2
                        }]
                    };
                    bar.setOption(option);
                },
                error: function (e) {
                    layer.msg("请求服务器失败!")
                }
            });


        }
        function sex() {
            $.ajax({
                url: "/getUserDataForSex",
                method: "get",
                success: function (result) {
                    jsonObj = JSON.parse(result)
                    var list1 = jsonObj["enable"]
                    var list2 = jsonObj["count"]
                    var sex = echarts.init(document.getElementById('sex'))
                    // 指定图表的配置项和数据
                    option = {
                        xAxis: {
                            type: 'category',
                            data:list1

                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: list2,
                            type: 'line'
                        }]
                    };
                    sex.setOption(option);
                },
                error: function (e) {
                    layer.msg("请求服务器失败!")
                }
            });


        }
        function line() {
            $.ajax({
                url:"getUnivTagsDataForLine",
                method:"get",
                success:function (result){
                    var jsonObj=JSON.parse(result);
                    var pie = echarts.init(document.getElementById('line'))
                    option = {

                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },

                        series: [
                            {
                                name: '半径模式',
                                type: 'pie',
                                radius: [20, 140],
                                center: ['50%', '50%'],
                                roseType: 'radius',
                                itemStyle: {
                                    borderRadius: 5
                                },
                                label: {
                                    show: false
                                },
                                emphasis: {
                                    label: {
                                        show: true
                                    }
                                },
                                data:  jsonObj
                            },

                        ]
                    };
                    pie.setOption(option);
                },
                error:function (e){
                    layer.msg("请求服务器失败");
                }
            });
        }

    </script>
</head>
<body>
<div class="layui-elem-quote">
    <h1>选课进度</h1>
    <a href="{{ url_for('index') }}">首页</a>
</div>
<div class="">
    <div class="layui-row layui-col-space4">
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header layui-bg-blue">选课数量统计</div>
                <div class="layui-card-body">
                    <div id="bar" style="width: 100%;height: 500px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header layui-bg-blue">选课比例</div>
                <div class="layui-card-body">
                    <div id="pie" style="width: 100%;height: 500px"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space4">
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div  class="layui-card-header layui-bg-blue">
                    每天上课人数
                </div>
                <div class="layui-card-body">
                    <div id="sex" style="width: 100%;height: 500px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header layui-bg-blue">男女比例</div>
                <div class="layui-card-body">
                    <div id="line" style="width: 100%;height: 500px"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;

    });
</script>
</body>

</html>